<template>
  <div class="home_recommend">
    <div class="home_recommend-sub">
      <van-tabs v-model:active="tabsActive" @change="tabsChange">
        <van-tab title="音乐"></van-tab>
        <van-tab title="MV"></van-tab>
        <van-tab title="排行"></van-tab>
      </van-tabs>
    </div>
    <div class="home_recommend-content">
      <keep-alive>
        <component :is="currCompName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  defineAsyncComponent,
  ref,
  reactive,
  toRefs,
  computed,
} from "vue";
export default defineComponent({
  name: "HomeRecommend",
  components: {
    RecommendMusic: defineAsyncComponent({
      loader: () => import("./recommend_music.vue"),
    }),
    RecommendMv: defineAsyncComponent({
      loader: () => import("./recommend_mv.vue"),
    }),
    RecommendRank: defineAsyncComponent({
      loader: () => import("./recommend_rank.vue"),
    }),
  },
  setup() {
    const tabsActive = ref<number>(0);
    const state = reactive({
      componentsMap: ["RecommendMusic", "RecommendMv", "RecommendRank"],
    });
    // tabs改变触发事件
    const tabsChange = (num: number) => {
      tabsActive.value = num;
    };
    // 当前显示组件名称
    const currCompName = computed(() => state.componentsMap[tabsActive.value]);
    return {
      ...toRefs(state),
      tabsActive,
      tabsChange,
      currCompName,
    };
  },
});
</script>

<style lang='scss' scoped>
.home_recommend {
  height: 100%;
  .home_recommend-sub {
    height: 42px;
    :deep() .van-tab {
      height: 42px;
      letter-spacing: 3px;
      font-weight: 600;
      &.van-tab--active {
        @include systemFontColor();
      }
    }
    :deep() .van-tabs__line {
      @include systemBackColor();
      width: 20px;
    }
    :deep() .van-tabs__nav {
      padding-bottom: 8px;
    }
  }
  .home_recommend-content {
    height: calc(100% - 42px);
    overflow: auto;
  }
}
</style>